<script lang="ts" setup>
import { ref, onMounted } from "vue";
import store from "@/store";
// 导入消息工具
import message from "@/utils/message.js";
// 导入图标工具
import { Calendar, Document, Search } from "@/utils/icons.js";

// 日志类型定义
interface LogItem {
    id: number;
    type: string;
    content: string;
    date: string;
    time: string;
    ip: string;
    status: "success" | "warning" | "danger";
}

const loading = ref(true);
const logs = ref<LogItem[]>([]);

// 搜索和过滤
const dateRange = ref([]);
const searchText = ref("");
const typeFilter = ref("all");

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 获取用户日志
const getLogs = () => {
    loading.value = true;

    // 模拟API请求
    setTimeout(() => {
        const mockLogs: LogItem[] = [
            {
                id: 1,
                type: "登录",
                content: "账号登录成功",
                date: "2025-05-10",
                time: "10:23:45",
                ip: "192.168.1.100",
                status: "success",
            },
            {
                id: 2,
                type: "简历",
                content: "更新了个人简历信息",
                date: "2025-05-09",
                time: "14:35:20",
                ip: "192.168.1.100",
                status: "success",
            },
            {
                id: 3,
                type: "投递",
                content: '投递简历到"前端开发工程师"职位',
                date: "2025-05-08",
                time: "09:12:34",
                ip: "192.168.1.100",
                status: "success",
            },
            {
                id: 4,
                type: "收藏",
                content: '收藏了"设计师"职位',
                date: "2025-05-07",
                time: "16:45:10",
                ip: "192.168.1.100",
                status: "success",
            },
            {
                id: 5,
                type: "登录",
                content: "账号登录失败，密码错误",
                date: "2025-05-06",
                time: "08:53:22",
                ip: "192.168.1.101",
                status: "danger",
            },
        ];

        logs.value = mockLogs;
        total.value = mockLogs.length;
        loading.value = false;
    }, 800);
};

// 根据条件搜索日志
const searchLogs = () => {
    message.success("搜索功能模拟");
    getLogs();
};

// 清空搜索条件
const resetSearch = () => {
    dateRange.value = [];
    searchText.value = "";
    typeFilter.value = "all";
    getLogs();
};

// 分页变化
const handlePageChange = (val: number) => {
    currentPage.value = val;
    getLogs();
};

onMounted(() => {
    getLogs();
});
</script>

<template>
    <div class="logs-container">
        <div class="page-title">
            <h2>用户日志</h2>
            <el-divider />
        </div>

        <!-- 搜索过滤区 -->
        <el-card class="search-card">
            <div class="search-form">
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="24" :md="8" :lg="8">
                        <el-form-item label="日期范围">
                            <el-date-picker
                                v-model="dateRange"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="日志类型">
                            <el-select v-model="typeFilter" placeholder="选择日志类型" style="width: 100%">
                                <el-option label="全部" value="all" />
                                <el-option label="登录" value="login" />
                                <el-option label="简历" value="resume" />
                                <el-option label="投递" value="apply" />
                                <el-option label="收藏" value="collect" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="关键词">
                            <el-input v-model="searchText" placeholder="请输入关键词">
                                <template #append>
                                    <el-button @click="searchLogs">
                                        <el-icon><Search /></el-icon>
                                    </el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <div class="search-buttons">
                    <el-button type="primary" @click="searchLogs">搜索</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </div>
            </div>
        </el-card>

        <!-- 日志列表 -->
        <el-card class="list-card" v-loading="loading">
            <el-table :data="logs" style="width: 100%" border>
                <el-table-column type="index" width="60" align="center" />
                <el-table-column prop="type" label="类型" width="120">
                    <template #default="{ row }">
                        <el-tag :type="row.status === 'danger' ? 'danger' : 'info'">{{ row.type }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="操作内容" min-width="200" />
                <el-table-column prop="date" label="日期" width="120" />
                <el-table-column prop="time" label="时间" width="120" />
                <el-table-column prop="ip" label="IP地址" width="150" />
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                    v-model:currentPage="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="getLogs"
                    @current-change="handlePageChange"
                />
            </div>
        </el-card>
    </div>
</template>

<style scoped>
.logs-container {
    padding: 10px 0;
}

.page-title {
    margin-bottom: 20px;
}

.page-title h2 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.search-card {
    margin-bottom: 20px;
}

.search-form {
    display: flex;
    flex-direction: column;
}

.search-buttons {
    text-align: right;
    margin-top: 20px;
}

.list-card {
    margin-bottom: 20px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>
